import ApiPageList from "@/api/ApiV1WxSessionPageList_post"; // TAV
import { InputSearch } from "@/component/InputSearch";
import { Toast } from "@/hooks/Providers";
import { useLocalForageItem } from "@/hooks/useLocalForage";
import { useOpenEditor } from "@/hooks/Workspaces/useOpenEditor";
import { ISessionItem, session_adapter2 } from "@/mgr";
import { Paths } from "@/paths";
import { usePaging } from "@/utils/usePaging";
import { SessionItem } from "@/views/SessionsView/SessionItem";
import { Typography } from "antd";
import dayjs from "dayjs";
import { useCallback } from "react";
import { FlexHeader, FlexRoot, ListEmpty } from "../../_BaseView/FlexRoot";
import { List } from "../../_BaseView/List";
export interface IRespItem extends ApiPageList.RespData { }
export interface IUIItem extends ISessionItem { }
export default function SessionManagement() {
  const [toast] = Toast.use()
  const [filters, set_filters, filters_ready] = useLocalForageItem<ApiPageList.BodyParams>({
    key: `${SessionManagement.name}#filters`
  });
  const { paging, list } = usePaging<IUIItem, ApiPageList.BodyParams>({
    forage_key: `${SessionManagement.name}#list`,
    ready: filters_ready,
    catcher: e => { toast.error(e) },
    loader: async (p) => {
      const body: ApiPageList.BodyParams = {
        ...p.params,
        pageNo: p.page,
        pageSize: p.page_size
      }
      const start_idx = ((p.page - 1) * p.page_size)
      const reply = await ApiPageList.call(body);
      const raws: IRespItem[] = (reply as any).data ?? []
      const total = (reply as any).totalCount ?? raws.length ?? 0
      p.set_total(total)
      return raws.map((v, i) => {
        const ret = session_adapter2(v, dayjs())
        const index = (1 + start_idx + i)
        ret.index = index
        return ret
      });
    }
  })

  const open_editor = useOpenEditor();

  const render_item = useCallback((item: IUIItem) => {
    const on_click = (e: React.MouseEvent) => {
      const title = <>{item.raw.nickName}<Typography.Text type='secondary'>{'<>'}</Typography.Text>{item.raw.account}</>
      const uid = `r_${item.account}_${item.userName}`
      open_editor({ uid, kind: Paths.All.RemoteChat, title, data: { ...item } })
      e.stopPropagation();
      e.preventDefault();
    }
    return (
      <SessionItem
        item={item}
        searching_value={filters?.searchContent}
        key={item.userName}
        show_account
        onClick={on_click} />
    )
  }, [filters?.searchContent])

  const load_more = () => paging.load()
  const refresh = () => paging.load(true, filters)

  return (
    <FlexRoot vertical>
      <FlexHeader vertical align='stretch'>
        <InputSearch
          value={filters?.searchContent ?? ''}
          onChange={e => set_filters(o => ({ ...o, searchContent: e.target.value }))}
          loading={paging.loading}
          style={{ flex: 1, paddingLeft: 0, paddingRight: 0 }}
          placeholder="账号/群名/发送人"
          allowClear
          onSearch={refresh} />
        <Typography.Text type='secondary'>共有{paging.total}个会话</Typography.Text>
      </FlexHeader>
      <List
        virtual={Number(list?.length) > 100}
        data={list || []}
        itemHeight={71}
        itemKey={i => `${i.account}_${i.userName}`}
        on_reach_end={load_more}
        others={<ListEmpty show={!paging.total && !paging.loading} description='' />}>
        {render_item}
      </List>
    </FlexRoot>
  )
}